<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/css/elementui.css" >

</head>
<body>

<div id="app" >
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名字">
        </el-table-column>
        <el-table-column
                prop="letter"
                label="首字母">
        </el-table-column>
        <el-table-column
                label="图片">
            <template slot-scope="scope" >
                <img :src="scope.row.image">
            </template>
        </el-table-column>
        <el-table-column
                prop="seq"
                label="排序">
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="fetchData"
            @current-change="fetchData"
            :current-page.sync="page.current"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page.size"
            layout="total, sizes, jumper"
            :total="total">
    </el-pagination>

</div>

</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                total: 0,
                page: {
                    current: 1,
                    size: 10
                },
                tableData: []
            }
        },
        created(){
            this.fetchData()
        },
        methods: {
            fetchData(){
                debugger
                axios.get(`/brand/page?current=${this.page.current}&size=${this.page.size}`).then(data => {
                    this.tableData = data.data.records
                    this.total = data.data.total
            })
            }
        }
    })
</script>
</html>